<!-- 主题设置抽屉 license by http://eleadmin.com -->
<template>
  <el-drawer
    size="300px"
    :visible="visible"
    :append-to-body="true"
    :title="t('ele.setting.title')"
    @update:visible="updateVisible">
    <div :class="['ele-setting-wrapper', {'ele-setting-dark': darkMode}]">
      <!-- 侧栏风格设置 -->
      <div class="ele-setting-theme ele-text-primary">
        <el-tooltip :content="t('ele.setting.sideStyles.dark')" placement="top">
          <div class="ele-bg-base ele-side-dark" @click="setSideStyle(1)">
            <i class="el-icon-check" v-if="sideStyle === 1"></i>
          </div>
        </el-tooltip>
        <el-tooltip :content="t('ele.setting.sideStyles.light')" placement="top">
          <div class="ele-bg-base" @click="setSideStyle(0)">
            <i class="el-icon-check" v-if="sideStyle === 0"></i>
          </div>
        </el-tooltip>
      </div>
      <!-- 顶栏风格设置 -->
      <div class="ele-setting-theme ele-text-primary">
        <el-tooltip :content="t('ele.setting.headStyles.light')" placement="top">
          <div class="ele-bg-base ele-head-light" @click="setHeadStyle(0)">
            <i class="el-icon-check" v-if="headStyle === 0"></i>
          </div>
        </el-tooltip>
        <el-tooltip :content="t('ele.setting.headStyles.dark')" placement="top">
          <div class="ele-bg-base ele-head-dark" @click="setHeadStyle(1)">
            <i class="el-icon-check" v-if="headStyle === 1"></i>
          </div>
        </el-tooltip>
        <el-tooltip :content="t('ele.setting.headStyles.primary')" placement="top">
          <div class="ele-bg-base ele-head-primary" @click="setHeadStyle(2)">
            <div class="ele-bg-primary"></div>
            <i class="el-icon-check" v-if="headStyle === 2"></i>
          </div>
        </el-tooltip>
      </div>
      <!-- 主题颜色设置 -->
      <template v-if="(typeof themes !== 'undefined') && (themes !== null)">
        <div v-if="themes.length" class="ele-setting-colors">
          <el-tooltip v-for="(d, i) in themes" :key="i" :content="d.name" placement="top">
            <div
              class="ele-setting-color-item"
              :style="{'background-color': d.color}"
              @click="setColor(d.value)">
              <i class="el-icon-check" v-if="color === d.value"></i>
            </div>
          </el-tooltip>
        </div>
        <div v-else class="ele-setting-colors">
          <el-tooltip :content="t('ele.setting.colors.default')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #1890ff;"
              @click="setColor(null)">
              <i class="el-icon-check" v-if="!color"></i>
            </div>
          </el-tooltip>
          <el-tooltip :content="t('ele.setting.colors.dust')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #5f80c7;"
              @click="setColor('dust')">
              <i class="el-icon-check" v-if="color === 'dust'"></i>
            </div>
          </el-tooltip>
          <el-tooltip :content="t('ele.setting.colors.sunset')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #faad14;"
              @click="setColor('sunset')">
              <i class="el-icon-check" v-if="color === 'sunset'"></i>
            </div>
          </el-tooltip>
          <el-tooltip :content="t('ele.setting.colors.volcano')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #f5686f;"
              @click="setColor('volcano')">
              <i class="el-icon-check" v-if="color === 'volcano'"></i>
            </div>
          </el-tooltip>
          <el-tooltip :content="t('ele.setting.colors.purple')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #9266f9;"
              @click="setColor('purple')">
              <i class="el-icon-check" v-if="color === 'purple'"></i>
            </div>
          </el-tooltip>
          <el-tooltip :content="t('ele.setting.colors.cyan')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #2bccce;"
              @click="setColor('cyan')">
              <i class="el-icon-check" v-if="color === 'cyan'"></i>
            </div>
          </el-tooltip>
          <el-tooltip :content="t('ele.setting.colors.green')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #33cc99;"
              @click="setColor('green')">
              <i class="el-icon-check" v-if="color === 'green'"></i>
            </div>
          </el-tooltip>
          <el-tooltip :content="t('ele.setting.colors.geekblue')" placement="top">
            <div
              class="ele-setting-color-item"
              style="background-color: #32a2d4;"
              @click="setColor('geekblue')">
              <i class="el-icon-check" v-if="color === 'geekblue'"></i>
            </div>
          </el-tooltip>
        </div>
      </template>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.darkMode') }}</div>
        <div class="setting-item-control">
          <el-switch :value="darkMode" @change="setDarkMode"/>
        </div>
      </div>
      <el-divider/>
      <!-- 导航模式设置 -->
      <div class="ele-setting-title ele-text-secondary">{{ t('ele.setting.layoutStyle') }}</div>
      <div class="ele-setting-theme ele-text-primary">
        <el-tooltip :content="t('ele.setting.layoutStyles.side')" placement="top">
          <div class="ele-bg-base ele-side-dark" @click="setLayoutStyle(0)">
            <i class="el-icon-check" v-if="layoutStyle === 0"></i>
          </div>
        </el-tooltip>
        <el-tooltip :content="t('ele.setting.layoutStyles.top')" placement="top">
          <div class="ele-bg-base ele-head-dark" @click="setLayoutStyle(1)">
            <i class="el-icon-check" v-if="layoutStyle === 1"></i>
          </div>
        </el-tooltip>
        <el-tooltip :content="t('ele.setting.layoutStyles.mix')" placement="top">
          <div class="ele-bg-base ele-layout-mix" @click="setLayoutStyle(2)">
            <i class="el-icon-check" v-if="layoutStyle === 2"></i>
          </div>
        </el-tooltip>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.sideMenuStyle') }}</div>
        <div class="setting-item-control">
          <el-switch :value="sideMenuStyle === 'mix'" @change="setSideMenuStyle"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.bodyFull') }}</div>
        <div class="setting-item-control">
          <el-switch :value="bodyFull" @change="setBodyFull"/>
        </div>
      </div>
      <!-- 其它配置 -->
      <el-divider/>
      <div class="ele-setting-title ele-text-secondary">{{ t('ele.setting.other') }}</div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.fixedHeader') }}</div>
        <div class="setting-item-control">
          <el-switch :value="fixedHeader" @change="setFixedHeader"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.fixedSidebar') }}</div>
        <div class="setting-item-control">
          <el-switch :value="fixedSidebar" @change="setFixedSidebar"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.fixedBody') }}</div>
        <div class="setting-item-control">
          <el-switch :value="fixedBody" @change="setFixedBody"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.logoAutoSize') }}</div>
        <div class="setting-item-control">
          <el-switch :value="logoAutoSize" @change="setLogoAutoSize"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.colorfulIcon') }}</div>
        <div class="setting-item-control">
          <el-switch :value="colorfulIcon" @change="setColorfulIcon"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.sideUniqueOpen') }}</div>
        <div class="setting-item-control">
          <el-switch :value="sideUniqueOpen" @change="setSideUniqueOpen"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.showFooter') }}</div>
        <div class="setting-item-control">
          <el-switch :value="showFooter" @change="setShowFooter"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.weakMode') }}</div>
        <div class="setting-item-control">
          <el-switch :value="weakMode" @change="setWeakMode"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.showTabs') }}</div>
        <div class="setting-item-control">
          <el-switch :value="showTabs" @change="setShowTabs"/>
        </div>
      </div>
      <div class="ele-setting-item">
        <div class="setting-item-title">{{ t('ele.setting.tabStyle') }}</div>
        <div class="setting-item-control">
          <el-select size="mini" :value="tabStyle" @change="setTabStyle">
            <el-option :label="t('ele.setting.tabStyles.default')" :value="0"/>
            <el-option :label="t('ele.setting.tabStyles.dot')" :value="1"/>
            <el-option :label="t('ele.setting.tabStyles.card')" :value="2"/>
          </el-select>
        </div>
      </div>
      <template v-if="(typeof tips !== 'undefined') && (tips !== null)">
        <el-divider/>
        <el-alert
          type="warning"
          :closable="false"
          class="ele-alert-border"
          :title="tips || t('ele.setting.tips')"/>
      </template>
    </div>
  </el-drawer>
</template>

<script>
import Locale from 'element-ui/lib/mixins/locale';

export default {
  name: 'EleProSetting',
  mixins: [Locale],
  emits: ['change-color', 'change-style', 'update:visible'],
  props: {
    // 是否显示, 支持.sync修饰
    visible: Boolean,
    // 顶栏风格
    headStyle: Number,
    // 侧边栏风格
    sideStyle: Number,
    // 布局风格
    layoutStyle: Number,
    // 侧栏边菜单风格
    sideMenuStyle: String,
    // 内容区域宽度是否铺满
    bodyFull: Boolean,
    // 是否固定顶栏
    fixedHeader: Boolean,
    // 是否固定侧栏
    fixedSidebar: Boolean,
    // 是否固定主体
    fixedBody: Boolean,
    // logo是否自适应宽度
    logoAutoSize: Boolean,
    // 侧栏是否多彩图标
    colorfulIcon: Boolean,
    // 侧边栏是否只保持一个子菜单展开
    sideUniqueOpen: Boolean,
    // 是否开启页脚
    showFooter: Boolean,
    // 是否色弱模式
    weakMode: Boolean,
    // 是否开启多标签
    showTabs: Boolean,
    // 标签页风格
    tabStyle: Number,
    // 是否暗黑模式
    darkMode: Boolean,
    // 当前主题色
    color: String,
    // 主题列表
    themes: Array,
    // 提示文字
    tips: String
  },
  methods: {
    /* 修改visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 切换主题色 */
    setColor(color, force) {
      if (force || color !== this.color) {
        this.$emit('change-color', color);
      }
    },
    /* 修改主题风格 */
    setStyle(key, value) {
      this.$emit('change-style', {key: key, value: value});
    },
    setHeadStyle(value) {
      this.setStyle('headStyle', value);
    },
    setSideStyle(value) {
      this.setStyle('sideStyle', value);
    },
    setLayoutStyle(value) {
      this.setStyle('layoutStyle', value);
    },
    setSideMenuStyle(value) {
      this.setStyle('sideMenuStyle', value ? 'mix' : 'default');
    },
    setBodyFull(value) {
      this.setStyle('bodyFull', value);
    },
    setFixedHeader(value) {
      this.setStyle('fixedHeader', value);
    },
    setFixedSidebar(value) {
      this.setStyle('fixedSidebar', value);
    },
    setFixedBody(value) {
      this.setStyle('fixedBody', value);
      if (value) {
        document.body.style.width = null;
      }
    },
    setLogoAutoSize(value) {
      this.setStyle('logoAutoSize', value);
    },
    setColorfulIcon(value) {
      this.setStyle('colorfulIcon', value);
    },
    setSideUniqueOpen(value) {
      this.setStyle('sideUniqueOpen', value);
    },
    setWeakMode(value) {
      this.setStyle('weakMode', value);
    },
    setDarkMode(value) {
      this.setStyle('darkMode', value);
      this.setColor(this.color, true);
    },
    setShowFooter(value) {
      this.setStyle('showFooter', value);
      if (!value) {
        document.body.style.width = null;
      }
    },
    setShowTabs(value) {
      this.setStyle('showTabs', value);
    },
    setTabStyle(value) {
      this.setStyle('tabStyle', value);
    }
  }
}
</script>

<style>
.ele-setting-wrapper {
  padding: 20px 18px;
}

.ele-setting-wrapper .ele-setting-title {
  font-size: 13px;
  margin-bottom: 15px;
}

/* 主题风格 */
.ele-setting-wrapper .ele-setting-theme > div {
  width: 52px;
  height: 36px;
  line-height: 1;
  font-size: 18px;
  border-radius: 3px;
  margin: 0 20px 30px 0;
  padding: 14px 0 0 24px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .6s;
}


.ele-setting-dark .ele-setting-theme > div {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.ele-setting-wrapper .ele-setting-theme > div:before,
.ele-setting-wrapper .ele-setting-theme > div:after,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  content: "";
  width: 100%;
  height: 10px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  transition: background-color .6s;
}

.ele-setting-dark .ele-setting-theme > div:before,
.ele-setting-dark .ele-setting-theme > div:after,
.ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
  background: #1f1f1f;
}

.ele-setting-wrapper .ele-setting-theme > div:after {
  width: 14px;
  height: 100%;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
  background: #001529;
}

.ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
  background: #262626;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  z-index: 1;
}

/* 主题色选择 */
.ele-setting-wrapper .ele-setting-colors {
  color: #fff;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-color-item {
  width: 20px;
  height: 20px;
  line-height: 22px;
  border-radius: 2px;
  margin: 8px 8px 0 0;
  display: inline-block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  vertical-align: top;
  text-align: center;
  cursor: pointer;
}

/* 主题配置项 */
.ele-setting-wrapper .ele-setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-title {
  flex: 1;
  line-height: 28px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-control {
  line-height: 1;
  max-width: 95px;
}

.ele-setting-wrapper .el-divider {
  margin-bottom: 20px;
}
</style>
